<template>
  <div class="strict-wrapper">
    <h2 class="title">严选</h2>
    <ul>
      <li class="strict-item" v-for="item of list" :key="item.id">
        <div class="strict-img">
          <img :src="item.imgUrl">
        </div>
        <div class="strict-text">
          <h2>{{item.title}}</h2>
          <p>{{item.subtitle}}</p>
          <p class="strict-text-spot"><span>{{item.BrightSpot.y}}</span><span>{{item.BrightSpot.e}}</span></p>
          <p class="strict-text-price"><span>{{item.PriceArea.price}}</span><span class="priceFont">{{item.PriceArea.unit}}</span><span
            class="model">{{item.PriceArea.area}}</span>
          </p>
          <div class="strict-right">
            <span>{{item.score}}</span>
            <p>综合评分</p>
          </div>
        </div>
      </li>
    </ul>
    <router-link tag="div" to="/strict/" class="strict-more">查看更多严选</router-link>
  </div>
</template>

<script>
  export default {
    name: 'HomeStrict',
    props:{
      list: Array
    },
    data () {
      return {

      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .strict-wrapper
    padding: 0 .3rem

  .title
    text-align: left
    font-size: .4rem
    font-family: PingFang-SC-Bold
    font-weight: 700
    color: #2f3c4d
    margin-bottom: .4rem
    margin-top: .3rem;


  .strict-wrapper ul
    width: 100%
    overflow hidden

  .strict-item
    width 100%
    box-sizing border-box
    border-bottom: .026667rem solid #f8f7f7
    display: flex
    align-items center
    padding: .3rem
    margin-bottom: .3rem
    background: #fff
    box-shadow: 0 0.08rem 0.16rem 0 rgba(0, 0, 0, .04)
    border-radius: .1rem

  .strict-img
    width: 2rem
    height: 1.9rem
    position: relative
    overflow hidden

  .strict-img img
    border-radius .1rem
    width: 100%
    height: 100%

  .strict-text
    flex: 1
    text-align: left
    padding-left: .346667rem
    position: relative

  .strict-text
    color #ccc
    font-size 0.012rem

  .strict-text h2
    font-size .3rem
    font-weight 500
    color black
    margin-bottom .1rem


  .strict-text .strict-text-spot
    margin-top .5rem


  .strict-text .strict-text-price
    margin-top .25rem
    font-size .3rem


  .strict-text-spot span
    background #f3f5f8
    color #9ba6aa
    margin-right .1rem
    padding .05rem .1rem
    border-radius .1rem


  .strict-text-price span
    color #ff9100
    font-size .3rem
    font-weight 400

  .strict-text-price .model
    color #798089
    font-size .2rem

  .strict-text-price .priceFont
    font-size .2rem


  .strict-right
    position absolute
    top 0
    right 0
    display flex
    flex-direction column
    align-items center

  .strict-right span
    color red
    font-size .35rem

  .strict-right p
    color #ccc
    margin-top .1rem

  .strict-more
    width: 100%
    height: 1.066667rem
    line-height: 1.066667rem
    border-radius: .266667rem
    background: #f0f2f5
    text-align: center
    font-size: .346667rem
    font-family: PingFang-SC-Medium
    font-weight: 500
    color: #6a81a2
    margin-top: .2rem
    margin-bottom: .3rem;

</style>
